<template>
  <div class="pc">
    <div class="yzw">
      <!-- <span>预置点位</span>
      <el-select v-model="state.yzwv" placeholder="请选择预置位" style="width: 150px">
        <el-option v-for="(item,inx) in state.ylist" :key="inx" :label="item.label" :value="item.value" />
      </el-select> -->
    </div>
    <div class="zoom">
      <el-button @mousedown="toptz('ZOOM_IN')" @mouseup="toptz('STOP')">
        <el-icon>
          <ZoomIn />
        </el-icon>
        <span style="margin-left: 6px">放大</span>
      </el-button>
      <el-button @mousedown="toptz('ZOOM_OUT')" @mouseup="toptz('STOP')">
        <el-icon>
          <ZoomOut />
        </el-icon>
        <span style="margin-left: 6px">缩小</span>
      </el-button>
    </div>
    <div class="ptz">
      <div class="yuan"></div>
      <div class="xyuan"></div>
      <div class="btleft" @mousedown="toptz('LEFT')" @mouseup="toptz('STOP')">
        <el-icon :size="40">
          <CaretLeft />
        </el-icon>
      </div>
      <div class="bttop" @mousedown="toptz('UP')" @mouseup="toptz('STOP')">
        <el-icon :size="40">
          <CaretLeft />
        </el-icon>
      </div>
      <div class="btright" @mousedown="toptz('RIGHT')" @mouseup="toptz('STOP')">
        <el-icon :size="40">
          <CaretLeft />
        </el-icon>
      </div>
      <div class="btbottom" @mousedown="toptz('DOWN')" @mouseup="toptz('STOP')">
        <el-icon :size="40">
          <CaretLeft />
        </el-icon>
      </div>
      <div
        class="btleftt"
        @mousedown="toptz('LEFT_UP')"
        @mouseup="toptz('STOP')"
      >
        <el-icon :size="30">
          <ArrowLeftBold />
        </el-icon>
      </div>
      <div
        class="btleftb"
        @mousedown="toptz('LEFT_DOWN')"
        @mouseup="toptz('STOP')"
      >
        <el-icon :size="30">
          <ArrowLeftBold />
        </el-icon>
      </div>
      <div
        class="btrightt"
        @mousedown="toptz('RIGHT_UP')"
        @mouseup="toptz('STOP')"
      >
        <el-icon :size="30">
          <ArrowLeftBold />
        </el-icon>
      </div>
      <div
        class="btrightb"
        @mousedown="toptz('RIGHT_DOWN')"
        @mouseup="toptz('STOP')"
      >
        <el-icon :size="30">
          <ArrowLeftBold />
        </el-icon>
      </div>
      <div class="btc" @mousedown="toptz('STOP')">
        <el-icon :size="50">
          <RefreshRight />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { handlecameracontrol } from "@/api/videoplan.js";
const props = defineProps({
  did: String,
});

const state = reactive({
  visible: false,
  yzwv: null,
  ylist: [],
});

watch(
  () => props.did,
  (newVal) => {
    if (newVal) {
      //getList();
    }
  },
  { immediate: true }
);

const getList = () => {
  // useApi
  //   .post("/api/common/handlecameracontrol", {
  //     deviceId: props.did,
  //   })
  //   .then((res) => {
  //     state.ylist = [...(res.data.eventInfoList || [])];
  //   });
};
const toptz = (cmd, yzw) => {
  alert(1);
  if (cmd == "STOP") {
    // useApi.post("/api/common/handlecameracontrol", {
    //   action: 1,
    //   cameraId: props.did,
    //   deviceId: props.did,
    //   command: "LEFT",
    // });
    handlecameracontrol({
      action: 1,
      cameraId: props.did,
      deviceId: props.did,
      command: "LEFT",
    });
  } else if (cmd != "GOTO_PRESET") {
    // useApi.post("/api/common/handlecameracontrol", {
    //   action: 0,
    //   cameraId: props.did,
    //   deviceId: props.did,
    //   command: cmd,
    // });
    handlecameracontrol({
      action: 0,
      cameraId: props.did,
      deviceId: props.did,
      command: cmd,
    });
  } else {
    handlecameracontrol({
      action: 0,
      cameraId: props.did,
      deviceId: props.did,
      command: "GOTO_PRESET",
      presetIndex: yzw,
    });
    // useApi.post("/api/common/handlecameracontrol", {
    //   action: 0,
    //   cameraId: props.did,
    //   deviceId: props.did,
    //   command: "GOTO_PRESET",
    //   presetIndex: yzw,
    // });
  }
};
</script>

<style lang="scss" scoped>
.pc {
  display: flex;
  flex-direction: column;
  width: 200px;
}
.yzw {
  display: flex;
  justify-content: space-between;
  span {
    margin-top: 8px;
  }
}
.zoom {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}
.ptz {
  margin-top: 10px;
  width: 200px;
  height: 200px;
  position: relative;
  .yuan {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 196px;
    height: 196px;
    border-radius: 50%;
    background: linear-gradient(134deg, #e9effb 0%, #fbfcff 100%);
    box-shadow: 3px 3px 16px 0px rgba(159, 177, 206, 0.7),
      -4px -3px 10px 0px #ffffff;
  }
  .xyuan {
    position: absolute;
    left: 58px;
    top: 58px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #6e8dfb;
    box-shadow: 0px 2px 4px 0px rgba(97, 117, 200, 0.5);
  }
  .btc {
    position: absolute;
    left: 75px;
    top: 75px;
    cursor: pointer;
    color: #ffffff;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btleft {
    position: absolute;
    left: 10px;
    top: 78px;
    cursor: pointer;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .bttop {
    position: absolute;
    left: 78px;
    top: 10px;
    transform: rotate(90deg);
    cursor: pointer;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btright {
    position: absolute;
    right: 10px;
    top: 78px;
    transform: rotate(180deg);
    cursor: pointer;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btbottom {
    position: absolute;
    bottom: 10px;
    left: 78px;
    transform: rotate(270deg);
    cursor: pointer;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btleftt {
    position: absolute;
    left: 30px;
    top: 30px;
    transform: rotate(45deg);
    cursor: pointer;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btleftb {
    position: absolute;
    left: 30px;
    bottom: 30px;
    transform: rotate(-45deg);
    cursor: pointer;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btrightt {
    position: absolute;
    right: 30px;
    top: 30px;
    transform: rotate(135deg);
    cursor: pointer;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btrightb {
    position: absolute;
    right: 30px;
    bottom: 30px;
    transform: rotate(-135deg);
    cursor: pointer;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
}
.el-icon {
  &:hover {
    color: #2263bf !important;
  }
}
</style>
